<template>
  <view class="container">
    <view class="header">
      <text class="title">{{ article.title }}</text>
      <view class="meta">
        <text class="date">{{ article.time }}</text>
        <text class="views">浏览量 {{ article.views }}万</text>
      </view>
    </view>
    <view class="content" v-html="article.content"></view>
  </view>
</template>

<script>
import { getNoticeDetail } from "@/api/employmentGuidance";

export default {
  data() {
    return {
      article: {
        title: '',
        time: '',
        views: 0,
        content: ''
      }
    };
  },
  onLoad(options) {
    // 获取路由参数中帖子的ID
    const id = options.id;
    this.fetchArticleDetail(id);
  },
  methods: {
    async fetchArticleDetail(id) {
        const res = await getNoticeDetail(id);
        if (res.code === 200) {
          this.article = res.data;
        } else {
          console.error("获取失败，接口返回状态码：", res.code);
          uni.showToast({
            title: "加载失败，请稍后再试",
            icon: "none"
          });
        }
    }
  }
};
</script>

<style scoped>
.container {
  padding: 60rpx;
  background-color: #fff;
  min-height: 100vh;
}

.header {
  margin-bottom: 20rpx;
}

.title {
  font-size: 64rpx;
  font-weight: bold;
  color: #1a1a1a;
  line-height: 1.3;
  display: block; /* 让标题独占一行 */
  margin-bottom: 40rpx; /* 增加标题与meta的距离 */
  letter-spacing: -1rpx; /* 微调字间距 */
}

.meta {
  display: flex;
  gap: 40rpx; /* 增加日期和浏览量的间距 */
  font-size: 30rpx;
  color: #888;
  padding: 20rpx 0;
  border-top: 1px solid #f0f0f0; /* 增加顶部分割线 */
}

/* 内容区域优化 */
.content {
  font-size: 32rpx;
  color: #000;
  line-height: 2; /* 优化行高，提升阅读体验 */
  padding:20rpx;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .container {
    padding: 40rpx 30rpx;
  }
  .title {
    font-size: 52rpx;
    margin-bottom: 30rpx;
  }
  .content {
    font-size: 32rpx;
    line-height: 1.8;
  }
}
</style>